<template>
  <el-dialog
    append-to-body
    :title='title'
    :visible.sync='dialogShow'
    width='60%'
    :before-close='beforeClose'
    :close-on-click-modal='false'
    :close-on-press-escape='false'
    custom-class='my-dialog form-top'
    center
  >
    <el-form :rules='rules' ref='form' :model='form'>
      <el-form-item label='账号：' prop='username' label-width='100px'>
        <el-input
          placeholder='请输入账号'
          v-model='form.username'
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label='密码：' prop='password' label-width='100px'>
        <el-input
          placeholder='请输入密码'
          v-model='form.password'
          show-password
          clearable
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot='footer' class='dialog-footer'>
      <el-button
        type='primary'
        class='dialog-btn'
        :loading='loading'
        @click="submitBtn('form')"
      >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import md5 from 'js-md5'
import { getIsAdmin } from '@/utils/auth'

export default {
  props: {
    dialogShow: {
      type: Boolean,
      default: false
    },
    // 登录类型（0-用户端 1-管理端）
    loginType: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      title: '管理端登录',
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: ['blur', 'change'] },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: ['blur', 'change'] },
          {
            min: 6,
            max: 16,
            message: '密码长度应为6-16位之间',
            trigger: 'blur'
          }
        ]
      },
      // 密码强度
      level: [],
      // 加载中
      loading: false
    }
  },
  computed: {
    isAdmin() {
      return getIsAdmin()
    }
  },
  methods: {
    beforeClose() {
      this.$refs.form.resetFields()
      this.$emit('dialogClose', false)
    },
    submitBtn(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = {
            username: this.form.username,
            password: md5(this.form.password),
            type: this.loginType
          }
          this.loading = true
          this.$store.dispatch('user/login', params).then(() => {
            this.loading = false
            let path = this.loginType === 0 ? '/home' : '/adminHome'
            if (this.loginType === 0) {
              this.$emit('dialogClose', false)
              if (this.isAdmin) {
                this.$router.replace({ path })
              }
              this.$store.dispatch('user/getInfo')
            } else {
              this.$router.replace({ path })
            }
          }).catch(() => {
            this.loading = false
          })
        }
      })
    }
  },
  watch: {
    loginType: {
      handler(val) {
        if (val == 0) {
          this.title = '用户端登录'
        } else {
          this.title = '管理端登录'
        }
      },
      immediate: true
    }
  },
  mounted() {
  }
}
</script>

<style scoped lang='scss'>
</style>
